<template>
    <div class="task-add">
        <template v-if="isEditing">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="taskName"></el-input>
            <div class="btns">
                <el-button size="mini" type="primary" @click="ok">添加</el-button>
                <el-button size="mini" @click="cancel">取消</el-button>
            </div>

        </template>

        <div @click="addTask" v-else>
            <i class="el-icon-plus"></i>新建任务
        </div>
    </div>

</template>

<script>
    import taskService from '../../biz/api/taskService'

    export default {
        props:{
            moduleId: {
                type: Number,
                isRequired: true,
            },
            type: {
                type: String,
                isRequired: true,
            },
        },
        data () {
            return {
                //正在新建task
                isEditing: false,
                //任务名称
                taskName: '',

            }
        },
        methods: {
            addTask(){
                this.isEditing = true
            },
            ok(){
                if(this.taskName.trim()){
                    taskService.addTask(this.moduleId, this.taskName, this.type)
                    this.isEditing = false
                    this.taskName = ''
                }
            },
            cancel(){
                this.isEditing = false
            }
        },
    }
</script>

<style scoped>

    /*新建任务*/
    .task-add{
        padding: 10px 8px;
        font-size: 12px;
        color: #666;
        cursor: pointer;
        background-color: #D6F4FE;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .task-add-text{
        height: 100px;
        display: block;
        border-radius: 4px;
        border: 1px solid #C8EBFB;
        margin-bottom: 4px;
    }

    .btns{
        display: flex;
        margin-top: 10px;
    }
</style>
